<template>
  <div ref="target" class="test-box"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useMutationObserver } from "@vueuse/core";

defineOptions({
  name: "UseMutationObserver"
})

const target = ref<HTMLElement | null>(null)
useMutationObserver(
    target,
    (mutations) => {
        console.log(mutations)
    }, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
        attributeOldValue: true,
        characterDataOldValue: true
    })
onMounted(() => {
  setTimeout(() => {
    const div = document.createElement('div')
    div.innerHTML = 'Hello MutationObserver'
    target.value?.appendChild(div)
  }, 5000)
})
</script>

<style scoped lang="css">
.test-box {
  width: 400px;
  height: 400px;
  background-color: #cccccc;
  margin: 60px auto;
}
</style>
